function toKeyValPair(names, values)
{
	var result = {};
	for(var i = 0; i < names.length; i++)
	{
		result[names[i]] = values[i];
	}
	return result;
}

function barGraph()
{
	
	
	/*var graphObjectArray = [];
	$.ajax(
	{
		url: '/misc/weber/CSEvals/ranking.cfm',
		type: "GET",
		dataType: "json",
		async: false,
		success:function(data)
		{
			var dataArray;
			var tableObject;
			$.each(data.DATA, function(i, array)
			{
				dataArray = toKeyValPair(data.COLUMNS, array);	//CONVERTS DATA TO A KEY VALUE PAIR FOR READABILITY
				tableObject = {marker:dataArray["MARKER"], course:dataArray["COURSE"], instructor:dataArray["INAME"], score:dataArray["INSTRUCTORAVERAGE"]};
				graphObjectArray.push(tableObject);
			});
		}
	});*/
	
	document.write("<table class='tablegraph' id = 'tableid' align='center'>" );
	document.write("<tr></tr><tr align = 'center'><td colspan = '9' width = '900px' >");
	document.write("<img src='images/blackbar-graph-skinny.png' style='padding-left: 7px;' height = '55%' width='100%' id='graphimage'>");

	
	var tablePos = document.getElementById('graphimage');
	var graphBounds = tablePos.getBoundingClientRect();
	
	
	/*var graphObject = {marker:"red", course:"3750", instructor:"Peterson, Brad", score:3.00};
	var graphObject2 = {marker:"red", course:"1010", instructor:"Hilton, Spencer", score:2.50};
	var graphObject3 = {marker:"green", course:"1410", instructor:"Jensen, Joshua", score:1.00};
	var graphObject4 = {marker:"red", course:"2350", instructor:"Jensen, Joshua", score:1.50};
	var graphObject5 = {marker:"red", course:"3740", instructor:"Peterson, Brad", score:2.00};
	var graphObject6 = {marker:"blue", course:"4750", instructor:"Jensen, Joshua", score:2.50};
	var graphObject7 = {marker:"red", course:"3250", instructor:"Hilton, Spencer", score:3.00};
	var graphObject8 = {marker:"red", course:"3750", instructor:"Hilton, Spencer", score:3.50};
	var graphObject9 = {marker:"red", course:"1400", instructor:"Peterson, Brad", score:4.00};*/
	
	var graphObjectArray = new Array();//[graphObject, graphObject2, graphObject3, graphObject4, graphObject5, graphObject6, graphObject7, graphObject8, graphObject9];
	
	
	for (var i = 0; i < 6; i++)
	 {
		var tempScore = (Math.random() * 4);
		var tempMarker;
		
		var tempColor = (Math.random() * 50).toFixed(0);
		
		if (tempColor == 0)
		{
			tempMarker = "red";
		}
		else if (tempColor == 1)
		{
			tempMarker = "green";
		}
		else if (tempColor >= 2)
		{
			tempMarker = "blue";
		}
		
		
		var tempObject = {marker:tempMarker, course:"CS 1400", instructor:"Peterson, Brad", score:tempScore.toFixed(2)};
		graphObjectArray.push(tempObject);
	}
	
	
	graphObjectArray.sort(function(a, b)
	{
		return a.score - b.score
	})
	
	
	var startIndex = 0;	//START THE NUMBER LINE
	var profListArray = new Array();	//LIST OF PROFESSORS FOR THE TITLE
	
	document.write("<div style = 'position:relative;'>");
			var top = -99;
		var zindex = 15;
	
	for(i = 0; i < graphObjectArray.length; i++)
	{

		//ADD PROFESSOR NAMES FOR THE TITLE
		if (profListArray.indexOf(graphObjectArray[i]["instructor"]) < 0)
		{
			profListArray.push(graphObjectArray[i]["instructor"]);
		}
	
		if (i != 0)
		{
			if (graphObjectArray[i - 1]["score"] == graphObjectArray[i]["score"])
			{
				top -= 8;
				zindex -= 1;
			}
			else
			{
				top = -99;
				zindex = 15;
			}
		}
		
		if (graphObjectArray[i]["marker"] == "red")
		{
			document.write("<img style='position: absolute; z-index: " + zindex + "; left:" + (((graphObjectArray[i]["score"] * 225) / 900) * 100) +"%; top: " + top + "px;'  title='" + graphObjectArray[i]["instructor"] + " - " + graphObjectArray[i]["course"] + ": " + graphObjectArray[i]["score"] + "' src = 'images/RedPinSmall.png'>");
		}
		else if (graphObjectArray[i]["marker"] == "green")
		{
			document.write("<img style='position: absolute; z-index: " + zindex + "; left:" + (((graphObjectArray[i]["score"] * 225) / 900) * 100) +"%; top: " + top + "px;'  title='" + graphObjectArray[i]["instructor"] + " - " + graphObjectArray[i]["course"] + ": " + graphObjectArray[i]["score"] + "' src = 'images/GreenPinSmall.png'>");
		}
		else if (graphObjectArray[i]["marker"] == "blue")
		{
			document.write("<img style='position: absolute; z-index: " + zindex + "; left:" + (((graphObjectArray[i]["score"] * 225) / 900) * 100) +"%; top: " + top + "px;'  title='" + graphObjectArray[i]["instructor"] + " - " + graphObjectArray[i]["course"] + ": " + graphObjectArray[i]["score"] + "' src = 'images/BluePinSmall.png'>");
		}
		
	}

	//CALCULATE AND BUILD TITLE
	var title = "Rankings of courses taught by ";
	profListArray.sort();
	if (profListArray.length == 1)
	{
		title += profListArray[0] + " ";
	}
	else if (profListArray.length == 2)
	{
		title += profListArray[0] + " and " + profListArray[1] + " "
	}
	else if (profListArray.length > 1)
	{
		for (var i = 0; i < profListArray.length - 2; i++)
		{
			title += profListArray[i] + ", ";
		}
		title += profListArray[profListArray.length - 2] + ", and ";
		title += profListArray[profListArray.length - 1] + " ";
	}
	

	
	title += "for " + semesterYear + ".";
	document.getElementById("title").innerHTML = title;

	
	var top2 = -103;
	
	//CALCULATE AND POSITION LEFTMOST DATAPOINT ("LOW")
	document.write("<img style='position: absolute;	left:" + (((graphObjectArray[0]["score"] * 225) / 900) * 100) + "%; top:" + (top2 + 70) + "px;'  title='Low Score' src = 'images/PointPinSmall.png'>");
	document.write("<div id = 'lowLabel' style='position: absolute; left:" + ((((graphObjectArray[0]["score"] * 225) / 900) * 100) - (2.5)) +  "%; top:" + (top2 + 140) + "px;'>Low</div>");

	//CALCULATE AND POSITION RIGHTMOST DATAPOINT ("HIGH")
	document.write("<img style='position: absolute;	left:"  + (((graphObjectArray[graphObjectArray.length - 1]["score"] * 225) / 900) * 100) + "%; top:" + (top2 + 70) + "px;'  title='High Score' src = 'images/PointPinSmall.png'>");
	document.write("<div id = 'highLabel' style='position: absolute; left:"  + ((((graphObjectArray[graphObjectArray.length - 1]["score"] * 225) / 900) * 100) + (1.0)) + "%; top:" + (top2 + 140) + "px;'>High</div>");

	//CALCULATE AND POSITION MIDDLEMOST DATAPOINT ("MEDIAN")
	var median = 0.0;
	if (graphObjectArray.length %2 == 0)
	{
		median = (parseFloat(graphObjectArray[(graphObjectArray.length / 2)]["score"]) + parseFloat(graphObjectArray[((graphObjectArray.length / 2) - 1)]["score"])) / 2;
	}
	else
	{
		median = graphObjectArray[parseInt((graphObjectArray.length / 2) - .5)]["score"];
	}
	document.write("<img id = 'medImage' style='position: absolute;	left:" + (((median * 225) / 900) * 100) + "%; top:" + (top2 + 70) + "px;'  title='Median' src = 'images/PointPinSmall.png'>");
	
	//alert(document.getElementById('medImage').offsetLeft - document.getElementById('lowLabel').offsetLeft)
	
	if ((document.getElementById('medImage').offsetLeft - document.getElementById('lowLabel').offsetLeft < 30) || (document.getElementById('highLabel').offsetLeft - document.getElementById('medImage').offsetLeft < 30))
		document.write("<div style='position: absolute; left:" + ((((median * 225) / 900) * 100) - (1.7)) + "%; top:" + (top2 + 160) + "px; text-align:center'>Median</div>");
	else
	document.write("<div style='position: absolute; left:" + ((((median * 225) / 900) * 100) - (1.7)) + "%; top:" + (top2 + 140) + "px; text-align:center'>Median</div>");

	
	//CALCULATE AND POSITION THE AVERAGE DATAPOINT ("MEAN") -- OPTIONAL
	/*var mean = 0.0;
	for (var i = 0; i < graphObjectArray.length; i++)
	{
		mean += parseFloat(graphObjectArray[i]["score"]);
	}
	mean /= graphObjectArray.length;
	document.write("<img style='position: absolute;	left:" + ((mean * 200) + 2) + "px; top:" + (top + 70) + "px;'  title='Mean' src = 'images/PointPinSmall.png'>");
	document.write("<div style='position: absolute; left:" + ((mean * 200) - 7) + "px; top:" + (top + 140) + "px;'>Mean</div>");*/

	//document.write("</td>");
	//document.write("</td></tr><tr ><td colspan='9'><img src = 'images/blackbar-graph-skinny.png' width = '100%' ></td></tr style='margin-top:-45px;'><tr valign='top'><td>" + startIndex.toFixed(1) + "</td>");

	
	document.write("<div style = 'position: absolute; top:0px; left:0%;'>" + (startIndex + 0.0).toFixed(1) + "</div>");
	document.write("<div style = 'position: absolute; top:0px; left:12.5%;'>" + (startIndex + 0.5).toFixed(1) + "</div>");
	document.write("<div style = 'position: absolute; top:0px; left:25.0%;'>" + (startIndex + 1.0).toFixed(1) + "</div>");
	document.write("<div style = 'position: absolute; top:0px; left:37.5%;'>" + (startIndex + 1.5).toFixed(1) + "</div>");
	document.write("<div style = 'position: absolute; top:0px; left:50.0%;'>" + (startIndex + 2.0).toFixed(1) + "</div>");
	document.write("<div style = 'position: absolute; top:0px; left:62.5%;'>" + (startIndex + 2.5).toFixed(1) + "</div>");
	document.write("<div style = 'position: absolute; top:0px; left:75.0%;'>" + (startIndex + 3.0).toFixed(1) + "</div>");
	document.write("<div style = 'position: absolute; top:0px; left:87.5%;'>" + (startIndex + 3.5).toFixed(1) + "</div>");
	document.write("<div style = 'position: absolute; top:0px; left:100.0%;'>" + (startIndex + 4.0).toFixed(1) + "</div>");
	
	document.write("</div></td></tr><tr></tr></table>");
	
	
	document.write("<table align='center'><tr><td colspan = '9' width = '900px'>Legend:</td>");
	document.write("<tr><td style='vertical-align:top'><img src = 'images/LegendSquare-Red.png'>Sections you teach</td></tr>");
	document.write("<tr><td class='legendrow' style='vertical-align:top'><img src = 'images/LegendSquare-Green.png'>Other sections in your department</td></tr>");
	document.write("<tr><td style='vertical-align:top'><img src = 'images/LegendSquare-Blue.png'>Sections in a department you do not manage or teach in</td></tr>");
	document.write("</tr></table>");
	

}



//http://stackoverflow.com/questions/1394061/how-to-merge-transparent-png-with-image-using-php

